/**
 * 关键字搜索
 */
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Select, Input, Row, Col } from 'antd';

const {Option} = Select;

const SelectKeyWord = forwardRef((props, ref) => {
    const handleSelectChange = (data) => {
        const { onChange, value } = props;
        onChange([data, value && value[1] ? value[1] : '']);
    };
    const handleInputChange = (e) => {
        const { value, onChange } = props;
        onChange([value[0], e.target.value]);
    };
    const {
        keyWord,
        value,
        hasDefaultOption,
        defaultOptionValue,
        defaultOptionText,
        allowClear,
        keySpan,
    } = props;
    return (
        <Row className="select-keyword" ref={ref}>
            <Col span={keySpan}>
                <Select
                    allowClear={allowClear}
                    placeholder="请选择"
                    value={value && value[0] ? value[0] : []}
                    onChange={handleSelectChange}
                >
                    {hasDefaultOption ? null : (
                        <Option value={defaultOptionValue}>{defaultOptionText}</Option>
                    )}
                    {keyWord.map((item) => {
                        return (
                            <Option key={item.value} value={item.value}>
                                {item.text}
                            </Option>
                        );
                    })}
                </Select>
            </Col>
            <Col span={24 - keySpan}>
                <Input
                    allowClear={allowClear}
                    value={value && value[1] ? value[1] : ''}
                    onChange={handleInputChange}
                    placeholder="请输入关键词"
                />
            </Col>
        </Row>
    );
});

SelectKeyWord.propTypes = {
    keyWord: PropTypes.array.isRequired,
    onChange: PropTypes.func,
    value: PropTypes.array,
    hasDefaultOption: PropTypes.bool,
    defaultOptionText: PropTypes.string,
    defaultOptionValue: PropTypes.string,
    keySpan: PropTypes.number,
    allowClear: PropTypes.bool,
};

SelectKeyWord.defaultProps = {
    defaultOptionValue: '',
    defaultOptionText: '请选择',
    allowClear: true, // 默认可清除
    keySpan: 11,
};

export default SelectKeyWord;
